<template>
  <h2>{{person}}</h2>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>薪资：{{job.j1.salary}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增加年龄</button>
  <button @click="job.j1.salary++">涨薪</button>
</template>

<script>
  // import {h} from 'vue'
  import { reactive, toRefs } from 'vue'
  export default {
    name: 'Demo',
    setup() {
      //数据
      let person = reactive({
        name:'张三',
        age:18,
        job:{
          j1:{
            salary:20
          }
        }
      })
      // const name1 = person.name
      // console.log('%%%%%%%%%%%',name1);
      // const name2 = toRef(person,'name')
      // console.log('%%%%%%%%%%%',name2);
      // const x = toRefs(person)
      // console.log('*********',x);
      // toRef:
        //作用：创建一个ref对象,其value值指向另一个对象中的某个属性
        //语法：const name = toRef(person,'name')
        //应用：要将响应式对象在的某个属性单独提供给外部使用时
        //拓展：toRefs与toRef功能一直,但可以批量创建多个ref对象,语法:(toRefs(person))
      //返回一个对象(常用)
      return {
        person,
        /* name:toRef(person,'name'),
        age:toRef(person,'age'),
        salary:toRef(person.job.j1,'salary') */
        ...toRefs(person)
      }
    },
  }
</script>

<style>
  #app {
    font-family: Avenir, Helvetica, Arial, sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-align: center;
    color: #2c3e50;
    margin-top: 60px;
  }
</style>
